<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：   语法：任意选择器：hover【悬停】  每个伪类选择器，具备特点
			                    所有元素具备：hover  【常见伪类选择器】
			 */
			h1:hover{
				background: #d1eeea;
				color: #e1eedf;
			}
			/* 伪类选择器：    :link      链接未点击时状态
			                  :active    链接被点击时状态
							  :visited   链接点击后状态
							  :hover     悬停链接时状态
				主要结合在一起：针对a元素效果			  
			 */
			a:link{ /*未访问状态*/
				color: #d8ee99;
				/*去掉超链接下划线*/
				text-decoration: none;
			}
			a:active{/*被点击时状态*/
				color: #c8c4ee;
				background: #c9eeed;
			}
			a:visited{/*点击后状态*/
				color: #c460ee;
				background:#c4eeea;
			}
			a:hover{
				font-size: 36px;
				
			}
			/* 
			 伪类选择器：    input:focus 获取焦点 鼠标点击输入框时的效果
			 针对 输入框 input元素
			 */
			input:focus{
				background: #b6eeb5;
			}
			/* 伪类选择器：         :first-child  第一个儿子元素
			                       :last-child   最后一个儿子元素
								   :nth-child(n) 匹配n个儿子元素
		     针对 父子级，默认父子级 table ，列表
			 */
			li:first-child{
				background: #ee9ab5;
				color: #b7e2ee;
			}
			li:last-child{
				font-size: 15px;
			}
			li:nth-child(2){
				background:#a3eeec;
				font-size: 15px;
			}
			li:nth-child(3){
				background: #aceeb0;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>沧州</li>
			<li>邯郸</li>
			<li>保定</li>
		</ol>
	</body>
</html>